<template>
  <div class="contain">
    <div class="con-left">
      <div class="quick">
        <h3 class="topic">
          <em class="user-icon user-icon_quick"></em>
        </h3>
        <ul class="bars">
          <li v-for="item in 8" @mouseover="barHover=item" @mouseout="barHover=-1">
            <a href>
              <em :class="'user-icon user-icon_bar'+item"></em>
              <i :class="{'user-icon_bar_hover':barHover==item}"></i>
            </a>
          </li>
        </ul>
        <div class="code">
          <img src="./code.jpg" alt>
        </div>
      </div>
    </div>
    <div class="con-info">
      <div class="community">
        <div class="sq-top">
          <span class="user-icon user-icon_cnity"></span>
          <p class="underline"></p>
        </div>
        <div class="sq-text">
          <ul class="sqList">
            <li v-for="(item,index) in sqList" @mouseover="sqHover=index" @mouseout="sqHover=-1">
              <a href>
                <p :class="{'sqHover':sqHover==index}">{{item}}</p>
              </a>
            </li>
          </ul>
        </div>
        <div class="sq-img">
          <a href>
            <img src="./shequ.jpg" alt="社区下方banner">
          </a>
        </div>
      </div>
      <div class="district">
        <div class="tr-top">
          <span class="user-icon user-icon_tr"></span>
          <p class="underline"></p>
        </div>
        <div class="tr-nav">
          <ul class="tr-nav-z">
            <li v-for="(item,index) in trList" @click="trImageClick(index)">
              <a href="javascript:">
                <span :class="{'navActive':trClick==index}">{{item}}</span>
                <em v-if="index<3"></em>
              </a>
            </li>
          </ul>
        </div>
        <div class="tr-imgTab">
          <ul class="imgList" v-for="(trimgList,i) in trHHImgList">
            <li v-for="(item,index) in trimgList">
              <a href>
                <div class="Img">
                  <img :src="item.imgUrl" alt>
                </div>
                <div class="back"></div>
                <p>{{item.text}}</p>
                <i class="user-icon user-icon_hh"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="video">
        <div class="video-top">
          <i class="user-icon user-icon_voTop"></i>
          <p class="underline"></p>
        </div>
        <div class="video-nav">
          <ul class="video-nav-z">
            <li v-for="(item,index) in videoList" @click="videImageClick(index)">
              <a href="javascript:">
                <span :class="{'navActive':videoClick==index}">{{item}}</span>
                <em v-if="index<2"></em>
              </a>
            </li>
          </ul>
        </div>
        <div class="video-imgTab">
          <ul class="imgList" v-for="(videimgList,i) in videImgList">
            <li v-for="(item,index) in videimgList">
              <a href>
                <div class="Img">
                  <img :src="item.imgUrl" alt>
                </div>
                <div class="back" v-if="index!=0"></div>
                <p>{{item.text}}</p>
                <i class="user-icon user-icon_play"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //快捷导航
      barHover: -1,
      //社区专栏
      sqList: [
        "【获奖名单】三国杀知识竞答小剧场（第89期）",
        "【获奖名单】三国杀知识竞答小剧场（第88期）",
        "【预告】如果三国杀做一套扑克，你觉得老K都是谁？Q呢？",
        "【社区活动】四方龙舟抢粽子大赛——游戏日（二）",
        "【日排名公布】四方龙舟抢粽子大赛游戏日（一）",
        "小桃来爆料啦，下一期的祈福武将是谁呢！"
      ],
      sqHover: -1,
      //同人专区
      trList: ["手绘漫画", "同人小说", "同人COS", "玩家风采"],
      trClick: 0,
      //同人专区下面的img
      trHHImgList: [
        //手绘漫画
        [
          {
            imgUrl: require("./shouhui1.png"),
            text: "【小杀摔倒啦】推倒土豪金，分元宝"
          },
          { imgUrl: require("./shouhui2.png"), text: "【绘画】又一只鲍三娘" },
          { imgUrl: require("./shouhui3.png"), text: "【绘图】矜持之花*大乔" },
          {
            imgUrl: require("./shouhui4.png"),
            text: "【条漫传记】周瑜，真正的东吴大都督"
          },
          {
            imgUrl: require("./shouhui5.png"),
            text: "【董白摔倒了】我们一起学猫叫"
          },
          {
            imgUrl: require("./shouhui6.png"),
            text: "【手绘】Q版24节气 霜降张飞"
          }
        ],
        //同人小说
        [
          { imgUrl: require("./xiaoshuo1.png"), text: "司马徽:半山风雨看逍遥" },
          { imgUrl: require("./xiaoshuo2.png"), text: "诸葛瞻:梦回季汉江湖里" },
          { imgUrl: require("./xiaoshuo3.png"), text: "一代雄主的爱恨两难" },
          { imgUrl: require("./xiaoshuo4.png"), text: "从广陵绝响看魏晋风度" },
          {
            imgUrl: require("./xiaoshuo5.png"),
            text: "曹魏五谋臣之算无遗策智贾诩"
          },
          { imgUrl: require("./xiaoshuo6.png"), text: "万紫千红总是春" }
        ],
        //同人Cos
        [
          {
            imgUrl: require("./COS1.jpg"),
            text: "郭嘉 · 天生郭奉孝，豪杰冠群英"
          },
          {
            imgUrl: require("./COS2.jpg"),
            text: "陆逊 · 三分自是多英俊，又显江南陆逊高"
          },
          {
            imgUrl: require("./COS3.jpg"),
            text: "小乔 · 东吴名将推公瑾，南国佳人说小乔"
          },
          {
            imgUrl: require("./COS4.jpg"),
            text: "孙尚香·谁知一女轻天下， 欲易刘郎鼎峙心"
          },
          {
            imgUrl: require("./COS5.jpg"),
            text: "孙策·却将江左业，分付紫髯郎 "
          },
          {
            imgUrl: require("./COS6.jpg"),
            text: "曹丕 · 一双眼光射寒星，两弯眉浑如刷漆"
          }
        ],
        //
        [
          { imgUrl: require("./wanjia1.png"), text: "司马徽:半山风雨看逍遥" },
          { imgUrl: require("./wanjia2.png"), text: "诸葛瞻:梦回季汉江湖里" },
          { imgUrl: require("./wanjia3.png"), text: "一代雄主的爱恨两难" },
          { imgUrl: require("./wanjia4.png"), text: "从广陵绝响看魏晋风度" },
          {
            imgUrl: require("./wanjia5.png"),
            text: "曹魏五谋臣之算无遗策智贾诩"
          },
          { imgUrl: require("./wanjia6.png"), text: "万紫千红总是春" }
        ]
      ],
      //视频中心
      videoList: ["攻略集锦", "同人创作", "赛事视频"],
      videoClick: 0,
      videImgList: [
        //攻略集锦
        [
          {
            imgUrl: require("./gonglue1.jpg"),
            text: "花式吊打 好施者们的默契"
          },
          { imgUrl: require("./gonglue2.jpg"), text: "循序渐进 一连到终" },
          { imgUrl: require("./gonglue3.jpg"), text: "一张牌引发的血案" },
          { imgUrl: require("./gonglue4.jpg"), text: "自书己见 大刷特刷" },
          { imgUrl: require("./gonglue5.jpg"), text: "没有忠臣的四月" },
          { imgUrl: require("./gonglue6.jpg"), text: "第五反贼" },
          { imgUrl: require("./gonglue7.jpg"), text: "智慧岂能少得了装身份？" }
        ],
        //同人创作
        [
          { imgUrl: require("./videotr1.jpg"), text: "手书：三国杀XDRRR!!" },
          {
            imgUrl: require("./videotr2.png"),
            text: "【司马嘉-玄亮-策瑜-丕植】建安烟云录(同人剧情歌)"
          },
          {
            imgUrl: require("./videotr3.jpg"),
            text: "《建安烟云录》(同人剧情歌)"
          },
          { imgUrl: require("./videotr4.jpg"), text: "左慈的神秘讲座" },
          {
            imgUrl: require("./videotr5.jpg"),
            text: "【鬼畜三国杀】水手——那个男人"
          },
          {
            imgUrl: require("./videotr6.jpg"),
            text: "第五反贼三国杀诗朗诵——短歌行"
          },
          {
            imgUrl: require("./videotr7.jpg"),
            text: "【“温馨”鬼畜】一首 三国杀 生日歌献给你"
          }
        ],
        //赛事视频
        [
          {
            imgUrl: require("./saishi1.jpg"),
            text: "2018SCL春季赛TOP5【第六期】"
          },
          {
            imgUrl: require("./saishi2.jpg"),
            text: "2018SCL春季赛TOP5【第七期】"
          },
          {
            imgUrl: require("./saishi3.jpg"),
            text: "三国杀百万奖金千人大赛冠军诞生"
          },
          {
            imgUrl: require("./saishi4.jpg"),
            text: "三国杀十周年嘉年华颜值玩家一览"
          },
          {
            imgUrl: require("./saishi5.jpg"),
            text: "三国杀百万奖金千人大赛选手入场"
          },
          { imgUrl: require("./saishi6.jpg"), text: "三国杀十周年嘉年华现场" },
          {
            imgUrl: require("./saishi7.jpg"),
            text: "三国杀十周年千人面杀全程回顾"
          }
        ]
      ]
    };
  },
  methods: {
    //同人专区的切换
    trImageClick: function(i) {
      if (this.trClick != i) {
        let trDom = $(".tr-imgTab .imgList");
        trDom.hide();
        trDom.eq(i).fadeIn(700);
        this.trClick = i;
      }
    },
    // 视频导航切换
    videImageClick: function(i) {
      if (this.videoClick != i) {
        let videDom = $(".video-imgTab .imgList");
        videDom.hide();
        videDom.eq(i).fadeIn(700);
        this.videoClick = i;
      }
    }
  }
};
</script>